<template>
  <div class="action-layout">
    <slot name="header" />
    <div style="flex: 1"/>
    <slot name="before" />
    <template v-if="actions">
      <template v-for="(item) in actions" :key="item.name">
        <el-button :size="item.size" :type="item.type" :icon="item.icon"
                   @click="() => item.action ? item.action() : {}" style="margin-right: 8px;">
          {{ item.label }}
        </el-button>
      </template>
    </template>
    <el-tooltip
        v-if="props.showZebra"
        effect="dark"
        content="显示隐藏表格斑马纹"
        placement="top">
      <el-switch
          v-model="isShowZebra"
          :inline-prompt="true"
          style="margin: 0 16px 0 16px;"
          @click="onShowZebra"
          :size="'large'"
          :active-action-icon="View"
          :inactive-action-icon="Hide"/>
    </el-tooltip>

    <div style="width: 1px;height:10px;margin: 4px 8px 4px 0;background: #f0f2f5;"/>
    <el-tooltip
        v-if="props.showRefresh"
        effect="dark"
        content="刷新内容"
        placement="top">
      <el-button @click="onRefresh" plain style="border:none;padding: 0 4px;">
        <el-icon :size="16">
          <Refresh/>
        </el-icon>
      </el-button>
    </el-tooltip>

    <el-tooltip
        effect="dark"
        v-if="props.showColumn"
        content="显示隐藏列"
        placement="top">
      <el-dropdown :hide-on-click="false" trigger="click" style="margin-left: 8px;">
        <el-button plain style="border:none;padding: 0 4px;margin-right: 16px;">
          <el-icon :size="16">
            <Setting/>
          </el-icon>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <template v-for="(item) in columns" :key="item.id">
              <el-dropdown-item v-if="!item.hideCol" @change="onChangeCol(item)">
                <el-checkbox :key="item.id" :label="item.name" v-model:checked="item.show" >
                  {{ item.name }}
                </el-checkbox>
              </el-dropdown-item>
            </template>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-tooltip>
    <slot name="after" />
  </div>
</template>

<script setup lang="ts">

import {ref} from "vue";
import {Hide, Refresh, Setting, View} from "@element-plus/icons-vue";

const props = withDefaults(defineProps<{
  columns: any,
  actions?: any,
  zebraTrigger?: any,
  refreshTrigger?: any,
  columnTrigger?: any,
  showZebra: boolean,
  showRefresh: boolean,
  showColumn: boolean,
}>(), {
  columns: [],
  showZebra: true,
  showColumn: true,
  showRefresh: true,
});

const columns = props.columns;
const isShowZebra = ref(false);

const onShowZebra = () => {
  if (props.zebraTrigger) {
    props.zebraTrigger(isShowZebra.value);
  }
}

const onRefresh = () => {
  if (props.refreshTrigger) {
    props.refreshTrigger();
  }
}

const onChangeCol = (item: any) => {
  item.show = !item.show;
  if (props.columnTrigger) {
    props.columnTrigger(item);
  }
}

</script>

<style scoped>
.action-layout {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-size: 12px;
  padding: 12px 16px;
  align-items: center;
}

</style>
